<template>
	<!--菜单部分-->
	<aside id="offCanvasSide" class="mui-off-canvas-right app-canvas-right">
		<div id="offCanvasSideScroll" class="mui-scroll-wrapper">
			<div class="mui-scroll">
				<div class="title">选择产品</div>
				<div class="user-number">受保人1</div>
				<div class="content">
					<template v-for="(item,$index) in list">
						<div class="proudct-type" v-if="$index=='SAVING'&&item.length">储蓄险</div>
						<div class="proudct-list" v-if="$index=='SAVING'&&item.length">
							<template v-for="(key,$ind) in item">
								<div class="list-mode">
									<input type="checkbox" :value="key.id" v-model="key_id" :id="key.id" class="list-input-checkbox" />
									<label :for="key.id" class="label-checkbox">{{key.title}}</label>
								</div>
							</template>
						</div>
						
						<div class="proudct-type" v-if="$index=='MEDICAL'&&item.length">医疗险</div>
						<div class="proudct-list" v-if="$index=='MEDICAL'&&item.length">
							<template v-for="(key,$ind) in item">
								<div class="list-mode">
									<input type="checkbox" :value="key.id" v-model="key_id" :id="key.id" class="list-input-checkbox" />
									<label :for="key.id" class="label-checkbox">{{key.title}}</label>
								</div>
							</template>
						</div>
						<div class="proudct-type" v-if="$index=='HEAVY_RISK'&&item.length">重疾险</div>
						<div class="proudct-list" v-if="$index=='HEAVY_RISK'&&item.length">
							<template v-for="(key,$ind) in item">
								<div class="list-mode">
									<input type="checkbox" :value="key.id" v-model="key_id" :id="key.id" class="list-input-checkbox" />
									<label :for="key.id" class="label-checkbox">{{key.title}}</label>
								</div>
							</template>
						</div>
						<div class="proudct-type" v-if="$index=='LIFE'&&item.length">人寿险</div>
						<div class="proudct-list" v-if="$index=='LIFE'&&item.length">
							<template v-for="(key,$ind) in item">
								<div class="list-mode">
									<input type="checkbox" :value="key.id" v-model="key_id" :id="key.id" class="list-input-checkbox" />
									<label :for="key.id" class="label-checkbox">{{key.title}}</label>
								</div>
							</template>
						</div>
					</template>
				</div>
			</div>
			
		</div>
		<div class="sumbit-btn" v-on:tap="submitSelect">确定</div>
	</aside>
</template>
<script>
	import {api} from '../../../gloabl/api.js'
	export default{
		data:function(){
			return{
				list:{
					SAVING:[],
					MEDICAL:[],
					HEAVY_RISK:[],
					LIFE:[],
				},
				data:{},
				key_id:[],
			}
		},
		mounted:function(){
			let me = this;
			let query = '{'+api.allProducts()+'}';
			me.$http.post(url.graphql,{query:query}).then((res)=>{
				let result = res.data.data.allProducts;
				me.data = result;
				for (let item of result) {
					if(item.isSupportFamilyPlan){
						if(item.category == 'SAVING'){
							me.list.SAVING.push(item)
						}
						if(item.category == 'MEDICAL'){
							me.list.MEDICAL.push(item)
						}
						if(item.category == 'HEAVY_RISK'){
							me.list.HEAVY_RISK.push(item)
						}
						if(item.category == 'LIFE'){
							me.list.LIFE.push(item)
						}
					}
				}
			})
		},
		methods:{
			submitSelect(){
				let array = {key_id:this.key_id,data:this.data};
				this.$emit('childByValue',array);
			}
		}
	}
</script>
<style scoped="scoped">
	.sumbit-btn{
		width: 60%;
		margin: auto;
		position: absolute;
		bottom: 30px;
		background-color: #F08800;
		color: #FFFFFF;
		text-align: center;
		padding: 13px 0;
		left: 20%;
		border-radius: 5px;
	}
	.app-canvas-right{
		background: #fff;
	}
	.title{
		padding: 15px;
		font-size: 18px;
		font-weight: 600;
	}
	.user-number{
		padding: 15px;
		font-size: 14px;
	}
	.content{
		font-size: 14px;
	}
	.proudct-type{
		background: #F0880010;
		color: #F08800;
		padding: 5px 15px;
	}
	.list-mode{
		width: 100%;
		padding: 10px 15px;
		min-height: 22px;
		position: relative;
		display: block;
	}
	.list-input-checkbox{
		opacity: 0;
		margin: 0;
		line-height: normal;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		padding: 0;
	}
	.label-checkbox{
		padding-left: 15px !important;
		min-height: 22px;
		line-height: 22px;
		display: inline-block;
		position: relative;
		vertical-align: top;
		margin-bottom: 0;
		font-weight: normal;
		cursor: pointer;
		white-space: nowrap;
		width: 80%;
	}
	.label-checkbox::before {
		content: "";
		display: inline-block;
		position: absolute;
		width: 22px;
		height: 22px;
		border: 1px solid #F08800;
		border-radius: 0px;
		margin-left: -29px;
	}
	.list-mode > input:first-child:checked + label::before, .list-mode > input:first-child:checked + input[type="hidden"] + label[data-v-3e01d313]::before{
		background-color: #F08800;
		border-color: #F08800;
	}
	.list-mode > input:first-child:checked + label::after, .list-mode > input:first-child:checked + input[type="hidden"] + label[data-v-3e01d313]::after {
		content: "";
		display: inline-block;
		position: absolute;
		top: 0;
		left: -14px;
		width: 7px;
		height: 10px;
		border: solid 2px #fff;
		border-left: none;
		border-top: none;
		-webkit-transform: translate(7.75px, 4.5px) rotate(45deg);
		transform: translate(7.75px, 4.5px) rotate(45deg);
	}
	.mui-scroll-wrapper{
		margin-bottom: 100px;
	}
</style>